<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="../js/jquery-3.1.1.js"></script>
<!--<![endif]-->
<script type="text/javascript">

</script>
	</head>
	<body>
		<p>CodePlayer</p>


<script type="text/javascript">
// 事件处理函数，弹出警告框并显示命名空间
/*
 当需要为同一个元素、同一种事件类型绑定多个事件处理函数时，
 一般情况下，触发某个事件，就会触发执行与之对应的所有事件处理函数；
 解除某种类型的事件绑定， 就会解除该事件类型绑定的所有事件处理函数。
 
 jQuery中事件类型的命名空间有点类似于类名选择器(.className)。在绑定事件时，
 可以在事件类型后定义一个或多个命名空间；
 在触发事件或移除事件时，可以只触发或移除包含指定命名空间的事件处理函数。
 * */
function handler( event ){
    console.log( event.namespace );
}

var $p = $("p");
// A：为所有p元素绑定click事件，定义在abc和foo两个命名空间下
$p.on( "click.abc.foo.cc", handler );
$p.on( "click.foo.cc", handler );
// B：为所有p元素绑定click事件，定义在test命名空间下
$p.on( "click.test", handler );


// 移除所有定义在foo命名空间下的click事件处理函数
//$p.off( "click.abc.foo" );
$p.off( "click.test" );
$p.off( "click.abc" );

// 执行所有的click事件处理函数，不限定命名空间 (触发A、B、C)
//$p.trigger( "click" ); // ""
$p.trigger( "abc" );  //空
// 执行定义在abc命名空间下的click事件处理函数 (触发A)
$p.trigger( "click.abc" ); // "abc"
// 执行同时定义在foo和abc命名空间下的click事件处理函数 (触发A)
$p.trigger( "click.foo" ); // "abc.foo"
$p.trigger( "click.abc.foo" ); // "abc.foo"
$p.trigger( "click.foo.abc" ); // "abc.foo"
$p.trigger( "click.foo.cc" ); // "abc.foo"
// 执行定义在test命名空间下的click事件处理函数 (触发B)
$p.trigger( "click.test" ); // "test"



</script>

	</body>
</html>
